<template>
  <!--  售后清单页面-->
  <div class="page">
    <!-- 条件筛选 -->
    <div class="page_filter">
      <el-select v-model="form.companyId" clearable placeholder="请选择公司名称" class="s-select">
        <el-option v-for="item in companyList" :key="item.id" :label="item.name" :value="item.id">
        </el-option>
      </el-select>
      <el-select v-model="form.status" clearable placeholder="请选择处理状态" class="s-select">
        <el-option v-for="item in EnumHandleStatusList" :key="item.code" :label="item.name" :value="item.code">
        </el-option>
      </el-select>
      <el-button class="common_btn-defalut" icon="el-icon-search" @click="form.page=1;queryList()">搜索</el-button>
    </div>
    <div class="page_main">
      <el-button icon="el-icon-plus" @click.stop="handleAdd" class="common_btn-small">新增售后</el-button>
      <!-- table -->
      <el-table :data="tableList" border>
        <el-table-column label="序号" fixed width="80">
          <template slot-scope="scope">
            {{getIndex(scope.$index)}}
          </template>
        </el-table-column>
        <el-table-column prop="companyName" show-overflow-tooltip label="公司名称">
        </el-table-column>
        <el-table-column prop="equipName" label="设备型号" width="180">
        </el-table-column>
        <el-table-column prop="equipName" label="故障设备编号" width="180">

        </el-table-column>
        <el-table-column prop="faultSymptom" show-overflow-tooltip label="故障现象" width="180">
        </el-table-column>
        <el-table-column
          width="140"
          label="处理状态">
          <template slot-scope="scope">
            <el-tag
              class="item_tag"
              :key="scope.row.status"
              :type="statusType(scope.row.status)"
              size="mini"
              effect="dark">
              {{ scope.row.statusName }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="operator" label="操作人" width="120">
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180">
          <template slot-scope="scope">
            {{scope.row.createTime|formatTimer()}}
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" label="更新时间" width="180">
          <template slot-scope="scope">
            {{scope.row.updateTime|formatTimer()}}
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="180">
          <template slot-scope="scope">
            <button class="btn_edit" @click="handleEdit(scope.row)">编辑</button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="form.page"  :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]"
                     :page-size="form.pageSize"   layout="sizes, prev, pager, next" :total="total">
      </el-pagination>
    </div>
    <!-- 新增编辑弹窗 -->
    <el-dialog :title="dialogTitle" :visible.sync="isShowDialog" :close-on-click-modal="false">
      <!-- 具体form表单 -->
      <el-form label-position="right" ref="form" :rules="rules" :model="currentRow" label-width="110px">
        <el-form-item label="公司名称" prop="companyId">
          <el-select v-model="currentRow.companyId" clearable placeholder="请选择公司名称" class="s-select" @change="getEquip">
            <el-option v-for="item in companyList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-row>
          <el-col :span="8">
            <el-form-item label="设备型号" prop="modelId">
              <el-select v-model="currentRow.modelId" :disabled="!currentRow.companyId" clearable placeholder="请先选择公司"
                         class="s-select"
                         @change="getEquip">
                <el-option v-for="item in EnumEquipTypeList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="故障设备" prop="equipSnList">
              <el-select multiple v-model="currentRow.equipSnList" :disabled="!currentRow.modelId" clearable
                         placeholder="请先选择型号" class="s-select">
                <el-option v-for="item in EquipList" :key="item.name" :label="item.name" :value="item.name">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="故障时间" prop="faultTime">
              <el-date-picker
                v-model="currentRow.faultTime"
                type="datetime"
                placeholder="选择日期时间"
                align="right">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="处理状态" prop="status">
          <el-radio-group v-model="currentRow.status">
            <el-radio-button v-for="item in EnumHandleStatusList" :key="item.code" :label="item.code">{{item.name}}
            </el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="故障现象" prop="faultSymptom">
          <el-input type="textarea"
                    :rows="2" v-model="currentRow.faultSymptom" clearable placeholder="故障现象"
                    class="s-phone"></el-input>
        </el-form-item>
        <el-button
          size="small"
          icon="el-icon-plus"
          @click="formationEdit"
          type="success">添加处理过程
        </el-button>
        <el-table :data="formationList" width="100%" style="margin-top: 20px">
          <el-table-column label="序号" fixed width="70" align="center">
            <template slot-scope="scope">
              {{getIndex(scope.$index)}}
            </template>
          </el-table-column>
          <el-table-column label="处理过程" min-width="140">
            <template slot-scope="scope">
              <el-input type="textarea"
                        :rows="2" v-model="scope.row.handle" clearable placeholder="处理过程"
                        class="s-phone"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="处理结果" min-width="140">
            <template slot-scope="scope">
              <el-input type="textarea"
                        :rows="2" v-model="scope.row.result" clearable placeholder="处理结果"
                        class="s-phone"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="处理时间" min-width="140">
            <template slot-scope="scope">
              <el-date-picker
                style="width: 150px"
                v-model="scope.row.handleTime"
                type="date"
                placeholder="选择日期时间"
                align="right">
              </el-date-picker>
            </template>
          </el-table-column>
          <el-table-column label="处理人" min-width="100">
            <template slot-scope="scope">
              <el-input v-model="scope.row.handleUser" clearable placeholder="处理人"
                        class="s-phone"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" min-width="80">
            <template slot-scope="scope">
              <el-button
                size="small"
                type="danger"
                @click="formationDelete(scope.$index)"
              >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <!-- 操作按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button class="common_btn-white" @click="isShowDialog = false">取消</el-button>
        <el-button class="common_btn-defalut" type="primary" @click="validateForm">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getEquipType,
  getEquipSelect,
  companySelectQuery,
  afterSaleAdd,
  afterSaleUpdate,
  afterSaleQuery
} from '@/services/model/sensor'
import Enums from '@/utils/enums'
import Format from '@/utils/format'
// form表单校验规则
const RULES = {
  // name: {
  //   required: true,
  //   message: '请输入标识'
  // },
  equipName: {
    required: true,
    message: '请输入采集仪类型'
  },
  nettyType: {
    required: true,
    message: '请选择通信类型'
  },
}
export default {
  mixins:[Enums],
  data() {
    return {
      form: {
        page: 1,
        pageSize: 10
      },
      total: 0,
      rules: RULES, // 表单校验的规则
      tableList: [],
      isShowDialog: false, // 是否显示弹窗
      currentRow: {}, // 新增数据
      EnumHandleStatusList: [],
      companyList: [],
      EnumEquipTypeList: [],
      EquipList: [],
      formationList: []
    }
  },
  computed: {
    // 弹窗的title
    dialogTitle() {
      return this.currentRow.id ? '编辑售后单' : '新增售后单'
    },
  },
  filters: {
    // 时间格式化
    formatTimer(timer) {
      return Format(new Date(timer))
    },
  },
  methods: {
    statusType(type) {
      if (type === 1) {
        return 'danger'
      } else if (type === 2) {
        return 'warning'
      } else if (type === 3) {
        return 'success'
      } else {
        return 'info'
      }
    },
    //删除一行数据
    formationDelete(row) {
      this.$delete(this.formationList, row)
    },
    formationEdit() {
      this.formationList.push({handle: null, result: null, handleUser: null, handleTime: null})
    },
    async getEquipType() {
      let res = await getEquipType();
      this.EnumEquipTypeList = res.data ? res.data : []
    },
    async getEquip() {
      if (this.currentRow.companyId && this.currentRow.modelId){
        let res = await getEquipSelect({companyId: this.currentRow.companyId, modelId: this.currentRow.modelId});
        this.EquipList = res.data ? res.data : []
      }
    },
    async getCompanyList() {
      // 监测单位查询
      let res = await companySelectQuery()
      this.companyList = res?.data || []
    },
    // 获取当前的序号
    getIndex(index) {
      let param = (this.form.page - 1) * this.form.pageSize + index + 1
      return param
    },
    // 分页大小改变
    handleSizeChange(val) {
      this.form.pageSize = val
      this.queryList()
    },
    // 当前页码改变
    handleCurrentChange(val) {
      this.form.page = val
      this.queryList()
    },
    // 表单提交
    validateForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.submitData()
        }
      })
    },
    async submitData() {
      // 根据ID判断使用新增还是编辑
      let action = this.currentRow.id ? afterSaleUpdate : afterSaleAdd
      this.currentRow = {...this.currentRow, handleItemList: this.formationList}
      let res = await action(this.currentRow)
      if (res.code === 200) {
        this.$notify({
          type: 'success',
          title: '提示',
          message: this.currentRow.id ? '编辑成功' : '添加成功'
        })
        this.isShowDialog = false
        this.queryList()
      }
    },
    // 新增数据
    handleAdd() {
      this.currentRow = {
        status: 1,
      }
      this.isShowDialog = true
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
      })
    },
    /**
     * row  当前操作行的对象
     */
    handleEdit(row) {
      this.currentRow = JSON.parse(JSON.stringify(row))
      this.formationList = this.currentRow.handleItemList
      this.isShowDialog = true
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
      })
    },
    async queryList() {
      let res = await afterSaleQuery(this.form)
      this.tableList = res.data?.records || []
      this.form.page = Number(res.data?.current)
      this.total = Number(res.data?.total)
    },
  },
  mounted() {
    //	传感器类型下拉框
    this.queryDictList(['EnumHandleStatus'], ['EnumHandleStatusList'])
  },
  activated() {
    this.queryList()
    this.getCompanyList()
    this.getEquipType()
  }
}
</script>

<style lang="less" scoped>
</style>
